<!--
  ~ Copyright (c) 2020 the original author or authors
  ~
  ~ Licensed under the Apache License, Version 2.0 (the "License");
  ~ you may not use this file except in compliance with the License.
  ~ You may obtain a copy of the License at
  ~
  ~      https://www.apache.org/licenses/LICENSE-2.0
  ~
  ~ Unless required by applicable law or agreed to in writing, software
  ~ distributed under the License is distributed on an "AS IS" BASIS,
  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express
  ~ or implied. See the License for the specific language governing
  ~ permissions and limitations under the License.
  -->
<div class="result">
  <div class="process-img">
    <app-drag-n-drop
      *ngIf="!resizeProcessPhoto"
      [title]="'dnd.title' | translate : { typeImage: 'dnd.source' | translate }"
      [label]="'dnd.label' | translate"
      [maxImageSize]="maxImageSize"
      (upload)="selectProcessFile.emit($event[0])"
      viewComponentColumn
    ></app-drag-n-drop>

    <mat-card *ngIf="resizeProcessPhoto">
      <app-change-photo
        #changePhoto
        [disabledButtons]="pending"
        [disabledLandmarksButton]="!printDataProcessPhoto"
        [disabledPoseButton]="!printDataProcessPhoto"
        (resetPhoto)="onResetProcessFile()"
        (changePhoto)="onResetProcessFile($event)"
        (addLandmark)="changePhoto.showLandmarks = !changePhoto.showLandmarks"
        (addPose)="changePhoto.showPose = !changePhoto.showPose"
      >
      </app-change-photo>

      <app-face-picture
        [picture]="resizeProcessPhoto"
        [printData]="printDataProcessPhoto"
        [isLoaded]="!pending"
        [showLandmarks]="changePhoto.showLandmarks"
        [showPose]="changePhoto.showPose"
      >
      </app-face-picture>
    </mat-card>
  </div>

  <div class="check-img">
    <app-drag-n-drop
      *ngIf="!resizeCheckPhoto"
      [title]="'dnd.title' | translate : { typeImage: 'dnd.target' | translate }"
      [label]="'dnd.label' | translate"
      [maxImageSize]="maxImageSize"
      (upload)="selectCheckFile.emit($event[0])"
      viewComponentColumn
    ></app-drag-n-drop>

    <mat-card *ngIf="resizeCheckPhoto">
      <app-change-photo
        #changePhoto
        [disabledButtons]="pending"
        [disabledLandmarksButton]="!printDataCheckPhoto"
        [disabledPoseButton]="!printDataCheckPhoto"
        (resetPhoto)="onResetCheckFile()"
        (changePhoto)="onResetCheckFile($event)"
        (addLandmark)="changePhoto.showLandmarks = !changePhoto.showLandmarks"
        (addPose)="changePhoto.showPose = !changePhoto.showPose"
      >
      </app-change-photo>

      <app-face-picture
        [picture]="resizeCheckPhoto"
        [printData]="printDataCheckPhoto"
        [type]="type"
        [isLoaded]="!pending"
        [showLandmarks]="changePhoto.showLandmarks"
        [showPose]="changePhoto.showPose"
      >
      </app-face-picture>
    </mat-card>
  </div>

  <ng-container *ngIf="isLoaded">
    <div class="request">
      <mat-expansion-panel>
        <mat-expansion-panel-header>
          <mat-panel-title>
            {{ 'test_model.request' | translate }}
          </mat-panel-title>
        </mat-expansion-panel-header>
        <div class="content">
          <pre>{{ requestInfo.request }}</pre>
        </div>
      </mat-expansion-panel>
    </div>
    <div class="response">
      <mat-expansion-panel>
        <mat-expansion-panel-header>
          <mat-panel-title>
            {{ 'test_model.response' | translate }}
          </mat-panel-title>
        </mat-expansion-panel-header>
        <div class="content">
          <pre>{{ formattedResult }}</pre>
        </div>
      </mat-expansion-panel>
    </div>
  </ng-container>
</div>
